<template>
  <el-button text :bg="isShow" @click="isShow = !isShow" :type="isShow ? 'primary' : ''">
    视频监控
  </el-button>
  <div id="popup" class="ol-popup" v-show="position">
    <div class="popup-top">
      摄像头: {{ number }}
      <div id="popup-closer" class="ol-popup-closer" @click="Close"></div>
    </div>

    <div id="popup-content">位置: {{ position }}</div>
    <img src="/img/交通.gif" alt="" width="200" height="120" />
    <!-- <video width="200" height="160" controls>
      <source src="/img/QQ20241112-223139.mp4" type="video/mp4" />
    </video> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
let popup, container, content, closer, coordinate, videodrawLayer
const { map } = defineProps({
  map: {
    type: Object,
    required: true,
  },
})

const position = ref('')
const number = ref('')
const isShow = ref(false)

function Close() {
  //未定义popup位置
  closer = document.getElementById('popup-closer')
  popup?.setPosition(undefined)
  //失去焦点
  closer.blur()
  if (videodrawLayer) {
    map.removeLayer(videodrawLayer)
    videodrawLayer = null
  }
  return false
}

map.on('click', function (e) {
  if (!isShow.value) return
  coordinate = e.coordinate
  getVideo(coordinate)
})
function getVideo(coordinate) {
  //初始化查询结构对象，设置查询结构包含几何信息
  var queryStruct = new Zondy.Service.QueryFeatureStruct()
  //是否包含几何图形信息
  queryStruct.IncludeGeometry = true
  //是否包含属性信息
  queryStruct.IncludeAttribute = true
  //是否包含图形显示参数
  queryStruct.IncludeWebGraphic = false
  var rule = new Zondy.Service.QueryFeatureRule({
    //是否将要素的可见性计算在内
    EnableDisplayCondition: false,
    //是否完全包含
    MustInside: false,
    //是否仅比较要素的外包矩形
    CompareRectOnly: false,
    //是否相交
    Intersect: true,
  })
  //创建一个用于查询的点形状
  var pointObj = new Zondy.Object.Point2D(coordinate[0], coordinate[1])
  //设置查询点的搜索半径
  pointObj.nearDis = 0.001

  //实例化查询参数对象
  var queryParam = new Zondy.Service.QueryByLayerParameter(
    'gdbp://MapGisLocal/wuhan/sfcls/摄像头',
    {
      geometry: pointObj,
      resultFormat: 'json',
      struct: queryStruct,
      rule: rule,
    },
  )
  //设置查询分页号
  queryParam.pageIndex = 0
  //设置查询要素数目
  queryParam.recordNumber = 100
  var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
    ip: '127.0.0.1',
    port: '8089', //访问IGServer的端口号，.net版为6163，Java版为8089
  })
  //执行查询操作，querySuccess为查询回调函数
  queryService.query(querySuccess, queryError)
}
//查询失败回调
function queryError(e) {
  //停止进度条
  console.log(e)
}

//查询成功回调
function querySuccess(result) {
  //初始化Zondy.Format.PolygonJSON类
  var format = new Zondy.Format.PolygonJSON()
  //将MapGIS要素JSON反序列化为ol.Feature类型数组
  var features = format.read(result)
  if (features) {
    position.value = features[0].getProperties().get('位置')
    number.value = features[0].getProperties().get('编号')
    if (videodrawLayer) {
      map.removeLayer(videodrawLayer)
      videodrawLayer = null
    }
    const center = features[0].getGeometry().flatCoordinates
    const pointgemo = new ol.geom.Point(center)
    const point = new ol.Feature({
      geometry: pointgemo,
    })
    const source = new ol.source.Vector({ features: [point] })

    videodrawLayer = new ol.layer.Vector({ source: source })
    const style = new ol.style.Style({
      image: new ol.style.Icon({
        src: '/img/图片1.png',
        scale: 0.4,
      }),
    })
    videodrawLayer.setStyle(style)
    map.addLayer(videodrawLayer)

    // const ID = features[0].getProperties().get('ID')
    // const URL = features[0].getProperties().get('URL')
    // const mpLayer = features[0].getProperties().get('mpLayer')
    // const OID = features[0].getId()
    // const center = features[0].getGeometry().flatCoordinates
    // console.log(center)
    // //设置当前点要素的几何信息
    // const pntObj = new Zondy.Object.GPoint(center[0], center[1])
    // const featureGeom = new Zondy.Object.FeatureGeometry({
    //   PntGeom: [pntObj],
    // })

    // const attValue = [ID, number.value, position.value, URL, mpLayer]
    // //描述点要素的符号参数信息
    // const cPntInfo = new Zondy.Object.CPointInfo({
    //   Angle: 0,
    //   Color: 5,
    //   SymHeight: 5,
    //   SymID: 108,
    //   SymWidth: 5,
    // })
    // //设置当前点要素的图形参数信息
    // const graphic = new Zondy.Object.WebGraphicsInfo({
    //   InfoType: 1,
    //   PntInfo: cPntInfo,
    // })
    // const feature1 = new Zondy.Object.Feature({
    //   fGeom: featureGeom,
    //   GraphicInfo: graphic,
    //   AttValue: attValue,
    //   feature: 1,
    // })
    // feature1.setFID(OID)
    // const cAttStruct = new Zondy.Object.CAttStruct({
    //   FldName: ['ID', '编号', '位置', 'URL', 'mpLayer'],
    //   FldNumber: 3,
    //   FldType: ['long', 'string', 'string', 'string', 'long'],
    // })
    // //创建一个要素数据集
    // const featureSet = new Zondy.Object.FeatureSet({
    //   AttStruct: cAttStruct,
    //   SFEleArray: [feature1],
    // })
    // var editService = new Zondy.Service.EditLayerFeature('gdbp://MapGisLocal/wuhan/sfcls/摄像头', {
    //   ip: '127.0.0.1',
    //   port: '8089',
    // })
    // editService.update(featureSet, onPntSuccess)
    // map.render()
    // map.triggerRepaint()

    container = document.getElementById('popup')
    popup = new ol.Overlay({
      //要转换成overlay的HTML元素
      element: container,
      //当前窗口可见
      autoPan: true,
      //Popup放置的位置
      positioning: 'bottom-center',
      //是否应该停止事件传播到地图窗口
      stopEvent: true,
      autoPanAnimation: {
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
        duration: 250,
      },
    })
    map.addOverlay(popup)
    popup.setPosition(coordinate)
  } else {
    Close()
  }
}
function onPntSuccess(data) {
  console.log(data)
}
</script>

<style scoped>
.ol-popup {
  width: 250px;
  height: 200px;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 5px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  position: absolute;
  top: 5px;
  right: 5px;
}

.ol-popup-closer:after {
  content: '✖';
}

#popup-content {
  position: absolute;
  top: 40px;
  font-size: 14px;
  font-family: '微软雅黑';
}

#popup-content .markerInfo {
  font-weight: bold;
}
.popup-top {
  position: absolute;
  background-color: #0994ff;
  color: #fff;
  padding: 5px;
  top: 0px;
  left: 0px;
  width: 250px;
  border-radius: 10px 10px 0 0;
}
video {
  margin-top: 15px;
}
img {
  margin-top: 45px;
}
</style>
